
import axios from 'axios'
export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
  getters: {
    total (state) {
      // reduce((p,c)=> p+c , 0)
      return state.list.reduce((p, c) => p + c.count, 0)
    },
    totalPrice (state) {
      return state.list.reduce((p, c) => p + c.count * c.price, 0)
    }
  },
  mutations: {
    updateList (state, payload) {
      state.list = payload
    },
    // 修改指定id项的count
    updateCount (state, payload) {
      // payload: {id, count}
      // 找到修改谁
      const goods = state.list.find((item) => item.id === payload.id)
      // 修改
      goods.count = payload.count
    }
  },
  actions: {
    // 封装了一个actions 去发请求
    async getList (ctx) {
      const res = await axios.get('http://localhost:3000/cart')
      // 只有通过提交mutations才能修改state
      ctx.commit('updateList', res.data)
      console.log('res', res)
    },
    // 封装一个修改数量的接口
    async updateList (ctx, payload) {
      // payload {count: 1, id: 1111}
      await axios.patch('http://localhost:3000/cart/' + payload.id, {
        count: payload.count
      })
      // 提交各mutation 修改数量
      ctx.commit('updateCount', payload)
    }
  }
}
// 1. 修改list数据需要通过vuex来修改

// 2. 携带id区分修改哪一项

// 3. 两种做法(改数据)  选择调用接口的形式
// 1. 通过接口,然后更新数据到本地
// 好处:数据永远跟服务器统一
// 缺点:多调用了一次接口

// 2. 本地直接修改数据
// 好处: 不用调用接口
// 缺点: 有可能数据不统一,出现脏数据 (多人同时操作可能会出现)

// json-server 启动的服务器

// 1. 查询
// 接口地址  http://localhost:3000/cart
// 请求方式 get

// 2. 修改
// 接口地址 http://localhost:3000/cart/:id   举例子:  :id 代表的是1234
// 请求方式 patch
// 请求参数: 穿个对象, 对象的键,就是要修改的值
